<template>
  <div id="app" ref="app">
    <transition name="fade">
        <nav-bar class=" relative z-50" v-show="showNav" ></nav-bar>
    </transition>
    <div class="main">
      <keep-alive>
        <router-view/>
      </keep-alive>
   </div>
    <footer class=" text-white text-center relative w-full z-0 p-8 bg-blue-600" style="margin-top:-1px">
        <div class="">
               -底部-
        </div>
    </footer>
  </div>
</template>
<script>
import Nav from "./components/Nav.vue"
export default {
  components:{
    'nav-bar':Nav
  },
  data(){
    return {
      showNav:true,
    }
  },
  mounted(){
    //监听滚动条
    window.addEventListener('mousewheel',this.handleScroll,false)
    //// firefox
    window.addEventListener("DOMMouseScroll",this.handleScroll,false)
  },
  destroyed(){
  //监听滚动条
    window.removeEventListener('mousewheel',this.handleScroll,false)
    //// firefox
    window.removeEventListener("DOMMouseScroll",this.handleScroll,false)
  },
  methods:{
    handleScroll(e){
      let isUp = e.deltaY < 0
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.info(scrollTop)
      // console.info(isUp)
    
      this.showNav = isUp
    },
  }
}
</script>
<style>
    ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 6px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
    display: none;
    }
    ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #535353;
    }
    ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background   : #ededed;
    }
    *{
      scroll-behavior:smooth;
    }
    @media screen and (max-width: 720px){
      body{
        font-size: 12px; 
      }
    }
    @media screen and (min-width: 720px){
      body{
        font-size: 14px; 
      }
    }

</style>
<style scoped>
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter,
    .fade-leave-to
    /* .fade-leave-active below version 2.1.8 */
    {
        opacity: 0;
    }


</style>